<template>
	<div>
		<el-dialog
			title="修改地址"
			:visible.sync="dialogVisible"
			width="50%"
			:before-close="handleClose"
			@close="DialdgClose"
		>
			<el-form :model="dataForm" :rules="FormRules" ref="FormRef" label-width="100px">
				<el-form-item label="省市区/县" prop="Address">
					<el-cascader
						v-model="dataForm.Address"
						:options="options"
						:props="props"
						@change="handleChange"
					></el-cascader>
				</el-form-item>
				<el-form-item label="详细地址" prop="DetailedAddress">
					<el-input v-model="dataForm.DetailedAddress" placeholder="请选择详细地址"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		},
		ID: {
			type: parseInt,
			default: 0
		}
	},
	data() {
		return {
			//省市区/县的数据
			options: [],
			props: {
				expandTrigger: 'hover',
				value: 'id',
				label: 'name',
				children: 'children'
			},
			//表单数据
			dataForm: {
				Id: 0,
				Address: [],
				DetailedAddress: ''
			},
			FormRules: {
				Address: [
					{ required: true, message: '请选择地址', trigger: 'change' }
				],
				DetailedAddress: [
					{
						required: true,
						message: '请输入详细地址',
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		//初始话数据
		getData() {
			this.getAreaTree()
		},
		getOrderData() {
			this.$get('/api/Order/GetOrder', {
				ID: this.ID
			}).then(res => {
				if (res.code == 0) {
					this.dataForm.Id = res.data.id
					this.dataForm.Address = res.data.address
						.split(',')
						.map(Number)
					this.dataForm.DetailedAddress = res.data.detailedAddress
				}
				console.log(this.dataForm)
			})
		},
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then(_ => {
					done()
				})
				.catch(_ => {})
		},
		//获取省市区/县
		getAreaTree() {
			this.$get('/api/Area/GetAreaTree')
				.then(res => {
					this.options = res.data
					this.getOrderData()

					console.log(res)
				})
				.catch(err => {
					console.log(err)
				})
		},
		//提交表单
		save() {
			this.$refs.FormRef.validate(valid => {
				if (valid) {
					console.log(this.dataForm)
					console.log(this.dataForm.Address.join(','))
					this.$get('/api/Order/EditOrder', {
						Id: this.dataForm.Id,
						Address: this.dataForm.Address.join(','),
						DetailedAddress: this.dataForm.DetailedAddress
					})
						.then(res => {
							if (res.code == 0) {
								this.$message({
									type: 'success',
									message: res.msg
								})
								this.dialogVisible = false
							} else {
								this.$message.error(res.data)
							}
						})
						.catch(err => {
							console.log(err)
						})
				}
			})
		},
		//关闭对话框
		DialdgClose() {
			this.$refs.FormRef.resetFields()
		},
		handleChange(val) {
			console.log(val)
		}
	},
	watch: {
		dialogVisible: function(val) {
			if (val == false) {
				//关闭弹窗
				this.$emit('handleClose', false)
			} else {
				this.getData()
			}
		}
	}
}
</script>

<style lang="stylus" scoped>
.el-cascader {
	width: 100%;
}
</style>